<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" autoresize />
  </div>
</template>
<script>
const lerp = require('lerp-array')
function dataSeq (arr1, arr2, step, tofixed) {
  var newArr = []
  for (let i = 0; i < 1; i += step) {
    newArr.push(lerp(arr1, arr2, i).map((item, index) => {
      return item.toFixed(tofixed)
    }))
  }
  return newArr.slice(0, (1 / step))
}
function transpose (arr) {
  var newArray = arr[0].map((col, i) => {
        return arr.map((row) => {
        return row[i]
        })
        })
  return newArray
}
export default {
  name: 'chart',
  props: ['index'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' }
    }
  },
  methods: {
  },
  computed: {
    insideSlideArray () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent
    },
    insideArrayIndex () {
      return this.insideSlideArray.indexOf(this.insideSlideArray.filter((currentValue) => {
        return currentValue.i === this.index
      })[0])
    },
    getDetail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.insideArrayIndex].itemContent.detail
    },
    getTimeLineData () {
      var rawData = JSON.parse(JSON.stringify(this.getDetail.sheetData))
      var year = rawData[0].slice(1, -1)
      var year1 = []
      for (let i = 1, n = (1 / this.getDetail.myRanking.step); i <= n; i++) {
        year1.push(year)
      }
      var year2 = transpose(year1)
      // console.log('year2', year2)
      var year3 = []
      for (let i = 0, length = year2.length; i < length; i++) {
        year3 = year3.concat(year2[i])
      }
      year3 = year3.slice(0, -(1 / this.getDetail.myRanking.step - 1))
      year3.unshift('')
      year3.push('image')
      // console.log('year3', year3)
      // console.log('data2', data2)
      return year3
    },
    getOptions () {
      var rawData = JSON.parse(JSON.stringify(this.getDetail.sheetData))
      var data1 = transpose(rawData)
      var category = data1[0].slice(1)
      var image = data1[data1.length - 1].slice(1)
      // console.log('image', image)
      var keyData = transpose(rawData.slice(1)).slice(1, -1)
      console.log('keyData', keyData)
      var newKeyData = []
      for (let i = 0; i < (keyData.length - 1); i++) {
        newKeyData = newKeyData.concat(dataSeq(keyData[i], keyData[i + 1], this.getDetail.myRanking.step, this.getDetail.myRanking.tofixed))
      }
      newKeyData.push(keyData[keyData.length - 1].map((item, index) => {
        return item.toFixed(this.getDetail.myRanking.tofixed)
      }))
      newKeyData.unshift(category)
      newKeyData.push(image)
     console.log('newKeyData', newKeyData)
      var data2 = transpose(newKeyData)
      console.log(data2)
      data2.unshift(this.getTimeLineData)
      console.log('data2', data2)
      /*
      console.log('newKeyData' + newKeyData)
      var data1 = transpose(newKeyData)
      console.log('data1' + data1) */
      var options = []
      for (let i = 0, n = data2[0].length - 2, nc = data2[0].length; i < n; i++) {
        var arr = data2.slice(1).map((item, index) => {
            return [item[0], item[i + 1], this.getDetail.color.linear[(index % 12)], this.getDetail.color.linear[(index % 12)].colorStops[0].color, item[(nc - 1)]]
        })
        arr.sort((a, b) => { return b[1] - a[1] })
        arr = arr.slice(0)
        // 转置
        var newArray = transpose(arr)
        console.log('newArray', newArray)
        options.push({
          series: [
          {
            ...this.getDetail.simpleBar,
            showBackground: false,
            barGap: '-100%',
            label: {
              ...this.getDetail.label
            },
            emphasis: this.getDetail.emphasis,
            animationDuration: this.getDetail.dtRankingBar.animationDuration,
            animationDurationUpdate: this.getDetail.dtRankingBar.animationDurationUpdate,
            animationEasing: this.getDetail.dtRankingBar.easing,
            animationEasingUpdate: this.getDetail.dtRankingBar.easing,
            type: 'bar',
            data: arr.map((item, index) => {
              return { name: item[0], value: item[1], itemStyle: { color: item[2] }, label: { color: item[3] } }
            })
          },
          {
            ...this.getDetail.simpleBar,
            showBackground: false,
            barGap: '-100%',
            label: {
              ...this.getDetail.label,
              position: this.getDetail.dtRankingBar.imageLabelPosition
            },
            animationDuration: this.getDetail.dtRankingBar.animationDuration,
            animationDurationUpdate: this.getDetail.dtRankingBar.animationDurationUpdate,
            animationEasing: this.getDetail.dtRankingBar.easing,
            animationEasingUpdate: this.getDetail.dtRankingBar.easing,
            type: 'bar',
            data: arr.map((item, index) => {
              return {
                name: item[0],
                value: item[1],
                itemStyle: { color: 'transparent' },
                label: {
                  formatter: '{a|}',
                  rich: {
                    a: {
                      backgroundColor: {
                        image: item[4]
                      },
                      height: this.getDetail.simpleBar.barMaxWidth - 2
                    }
                  }
                }
              }
            })
          }],
          yAxis: [{
            data: newArray[0],
            type: 'category',
            max: this.getDetail.dtRankingBar.top - 1
          }],
          title: {
            ...this.getDetail.title,
            text: data2[0][i + 1] + this.getDetail.title.text
          }
        })
      }
      return options
    },
    option () {
      return {
        baseOption: {
          animation: this.getDetail.animation,
          timeline: {
            data: this.getTimeLineData.slice(1, -1),
            ...this.getDetail.timeline
          },
          itemStyle: {
            ...this.getDetail.itemStyle
          },
          title: this.getDetail.title,
          dataset: {
            source: this.getDetail.sheetData,
            sourceHeader: true
          },
          grid: this.getDetail.grid,
          xAxis: this.getDetail.xAxis,
          yAxis: {
            ...this.getDetail.yAxis,
            axisLabel: {
              show: false
            }
          },
          tooltip: {},
          backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option]
        },
        options: this.getOptions
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
